<template>
  <div>
    <el-card class="box-card" :body-style="{padding:'5px'}">
      <div class="clearfix" style="padding:5px;">
        <span style="line-height: 36px;">详情</span>
      </div>

      <el-form ref="form" :model="form" label-width="120px">

        <el-row>
          <el-col :span="8">
            <el-form-item label="组合编号:" prop="combinationCode">
              <el-input v-model="form.combinationCode" placeholder="组合编号" :disabled="true"
                        style='width: 100%'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="时间:" prop="tradeDate">
              <el-input v-model="form.tradeDate" placeholder="时间" :disabled="disableForm"
                        style='width: 100%'></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="累计收益(%):" prop="accumulatedIncome">
              <el-input v-model="form.accumulatedIncome" placeholder="累计收益" :disabled="disableForm"
                        style='width: 100%'></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="info" @click="saveHandler" :disabled="disableForm">保存</el-button>
          <el-button type="danger" @click="resetHandler" :disabled="disableForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>


<script type="text/babel">
  import assignDeep from 'assign-deep'
  import {mapActions} from 'vuex'

  import historyStore from './bll/historyStore'
  import store from '../../store'

  (!store.state.historyStore) && store.registerModule('historyStore', historyStore)

  export default {
    data() {
      return {
        disableForm: true,
        pageModel: 'ADD',
        form: {
          combinationCode: '',
          tradeDate: '',
          accumulatedIncome: '',
          combinationId: ''
        }
      }
    },

    props: {
      param: {
        type: Object
      },
      mode: {
        type: String
      },
      code: {
        type: String
      }
    },

    watch: {
      param(record) {
        if (record) {
          this.form.combinationCode = record.combinationCode;
          this.form.combinationId = record.combinationId;
          this.form.tradeDate = record.tradeDate;
          this.form.accumulatedIncome = record.accumulatedIncome;
        } else {
          assignDeep(this.form, {
            combinationCode: '',
            tradeDate: '',
            accumulatedIncome: '',
            combinationId: ''
          });
        }
      },
      mode(val) {
        this.pageModel = val;
      },
      code(val) {
        this.form.combinationCode = val;
      }
    },

    mounted() {
      this.initPage();
    },

    methods: {
      ...mapActions(['editHistory', 'addHistory']),
      saveHandler() {
        console.log(this.pageModel)
        if (this.pageModel === 'ADD') {
          this.$confirm('确定添加, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.addHistory({
              combinationCode: this.form.combinationCode,
              accumulatedIncome: this.form.accumulatedIncome,
              tradeDate: this.form.tradeDate
            }).then(() => {
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.disableForm = true
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消添加'
            });
          });
        } else if (this.pageModel === 'EDIT') {
          this.$confirm('确定编辑, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.editHistory({
              combinationId: this.form.combinationId,
              accumulatedIncome: this.form.accumulatedIncome
            }).then(() => {
              this.$message({
                type: 'success',
                message: '编辑成功!'
              });
              this.disableForm = true
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消编辑'
            });
          });
        }
      },

      resetHandler() {
        this.$refs.form.resetFields();
        this.disableForm = true;
      },

      initPage() {

      },

      // interface for invoking

      disable() {
        this.disableForm = true;
      },
      enable() {
        this.disableForm = false;
      },
      clear() {
        this.$refs.form.resetFields();
      }

    }
  }
</script>

